jQuery Awesome Cursor

In your terminal:

npm install jquery-awesome-cursor

In your web page:

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-awesome-cursor/dist/jquery.awesome-cursor.min.js"></script></pre>
              

If you plan on using jquery-awesome-cursor with a different icon font, you can skip the FontAwesome dependency:

npm install --no-optional jquery-awesome-cursor

In your terminal:

              bower install jquery-awesome-cursor
              

In your web page:

<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-awesome-cursor/dist/jquery.awesome-cursor.min.js"></script>
              

IMPORTANT: As of v0.3.0, FontAwesome is considered an optional dependency. Therefore, you must install it yourself!

              bower install font-awesome
              

Download just the script:

Or download an archive of the latest code:

Then, in your web page:

<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.awesome-cursor.min.js"></script></pre>
              

You could also use RawGit's CDN:

<link rel="stylesheet" href="path/to/font-awesome.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jwarby/jquery-awesome-cursor/master/dist/jquery.awesome-cursor.min.js"></script></pre>
              

The first parameter to awesomeCursor is the icon name.

$('body').awesomeCursor('pencil');

Try it now!

The color of a cursor can be changed by setting the color option to any valid CSS color string:

• 'red'
• 'rgb(255, 0, 0)'
• 'hsl(0, 100%, 50%)'
• etc.

$('body').awesomeCursor('pencil', {
  color: 'red'
});

Try it now!

The size of the cursor can be changed by setting the size option.

Note: cursor sizes can only be defined in pixels, as the cursor hotspot CSS syntax only supports pixels

$('body').awesomeCursor('pencil', {
  size: 32
});

Try it now!

The hotspot location of the cursor can be defined using the hotspot option. This allows you to configure the point that the actual click will emanate from.

The hotspot can be configured in two different ways: using an array containing the [x, y] coordinates (in pixels) of the hotspot, or by using a descriptive string.

If you're using an array of coordinates, the values will be clamped between 0 and the size of the cursor minus 1. This is because the browser will default to 0, 0 for coordinates beyond the boundaries of the cursor.

Example: defining the hotspot using an array

$('body').awesomeCursor('pencil', {
  hotspot: [5, 7]
});

Example: defining the hotspot using a descriptive string

The strings 'bottom', 'top', 'left', 'right' and 'center' are recognised. These values can be combined by space-separating them; some examples are shown below:

• 'bottom left'
• 'center'
• 'center top'
• 'center right'
• 'top right'

$('body').awesomeCursor('pencil', {
  hotspot: 'bottom left'
});

Try it now!

The cursor can be flipped horizontally, vertically, or in both directions by setting the flip option.

flip can be one of:

• horizontal
• vertical
• both

To disable flipping, set flip to any falsy value (false, null, '', etc.). All other values will result in an error being thrown.

$('body').awesomeCursor('pencil', {
  flip: 'horizontal'
});

Try it now!

The cursor can be rotated any number of degrees using the rotate option.

$('body').awesomeCursor('pencil', {
  rotate: 45
});

Try it now!

An outline can be applied to a cursor by setting the outline option to any valid CSS color string.

$('body').awesomeCursor('pencil', {
  outline: 'black'
});

Try it now!